<style lang="scss">
  .commerce {
    .el-tabs {
      width: 100%;
      .el-tabs__header {
        margin: 10px 12px;
        .el-tabs__item.is-active {
          border-bottom: 2px solid #409EFF;
        }
      }
    }
  }
</style>

<template>
  <el-container class="commerce">
    <!-- 状态导航 -->
    <el-tabs v-model="activeTabState" type="card" @tab-click="tabClick">
      <el-tab-pane name="111">
        <span slot="label"><i class="el-icon-chat-line-round"></i> 两周报</span>
        <commerce-week ref="commerceWeek"></commerce-week>
      </el-tab-pane>
      <el-tab-pane name="222">
        <span slot="label"><i class="el-icon-chat-dot-round"></i> 月报</span>
        <commerce-month ref="commerceMonth"></commerce-month>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
  import commerceWeek from './commerce-week.vue'
  import commerceMonth from './commerce-month.vue'
  export default {
    data () {
      return {
        activeTabState: '111'
      }
    },
    methods: {
      // tab 点击
      tabClick (tab, event) {
        switch (tab.name) {
          case '111':
            this.$refs.commerceWeek.doSearch()
            break
          case '222':
            this.$refs.commerceMonth.doSearch()
            break
        }
      }
    },
    components: {
      commerceWeek, commerceMonth
    },
    created: function () {

    }
  }
</script>
